<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { IconCaretLeft, IconCaretRight } from '../icon/index.js'

//组件需要设置 height, font-size, width(默认auto), 否则显示效果会不理想

const props = defineProps({
    arr: {//展示的图片数组
        type: Array,
        default: [
            // './banner1.jpg',
            // './banner2.jpg',
        ],
    },
    autoplay: {//自动播放
        type: Boolean,
        default: false,
    },
    speed: {//切换间隔
        type: Number,
        default: 5000,
    },
    duration: {//切换时的动画速度
        type: Number,
        default: 1000,
    }
});

//展示区元素
const bannerBoxRef = ref(null);
//展示区域宽度
const baseWidth = ref(100);
//初始化 baseWidth
function doInitBaseWidth() {
    if(bannerBoxRef.value) {
        baseWidth.value = bannerBoxRef.value.offsetWidth;
    } else {
        baseWidth.value = 100;
    }
}
//存储数据的整个区域宽度
const bannerBodyWidth = computed(()=>{
    let w = baseWidth.value;
    let width = props.arr.length * w;
    return width;
});
//展示位置
const bannerBodyMarginLeft = computed(()=>{
    return currentIndex.value * -1 * baseWidth.value;
});
//展示数据的索引
const currentIndex = ref(0);

//control left right
function doChangeBanner(type) {
    let index = currentIndex.value + type;
    if(index < 0 || index >= props.arr.length) {
        return;
    }
    currentIndex.value = index;
    doStopPlay();

    setTimeout(()=>{
        //触摸 左右切换 后, 如果没有开始自动播放, 则启动自动播放
        if (!autoPlaying) {
            doStartAutoPlay();
        }
    }, 100);
}
//contorl piont
function doChangeBannerByIndex(index) {
    currentIndex.value = index;
    doStopPlay();
    setTimeout(()=>{
        //console.log('autoPlaying=', autoPlaying);
        //触摸 底部圆点切换 后, 如果没有开始自动播放, 则启动自动播放
        if (!autoPlaying) {
            doStartAutoPlay();
        }
    }, 100);
}

let type = 1;// 1 向右, -1 向左
let timer;//定时器
let autoPlaying = false;//是否自动播放中
function doAutoPlay() {
    let index = currentIndex.value;
    if(index <= 0) {
        type = 1;
    }
    if(index >= props.arr.length - 1) {
        type = -1;
    }
    doChangeBanner(type);

    clearTimeout(timer);
    timer = setTimeout(()=>{
        doAutoPlay();
    }, props.speed);
}

//启动自动播放
function doStartAutoPlay() {
    if(props.autoplay) {
        autoPlaying = true;

        clearTimeout(timer);
        timer = setTimeout(()=>{
            doAutoPlay();
        }, props.speed);
    }
}

//停止自动播放
function doStopPlay() {
    if(props.autoplay) {
        autoPlaying = false;
        clearTimeout(timer);
    }
}

//动画时间
const duration = computed(()=>{
    if(props.duration) {
        return props.duration + 'ms';
    }
    return '1000ms';
});

//页面宽度变化时,重置 baseWidth
let resetTimer;
function doResetBanner() {
    clearTimeout(resetTimer);
    resetTimer = setTimeout(()=>{
        doInitBaseWidth();
    }, 500);//浏览器宽度变化后,重绘重排需要时间,不能立即获取元素当前的宽度
}

function doResizeEventListener() {
    doResetBanner();
}
onMounted(()=>{
    doInitBaseWidth();
    doStartAutoPlay();
    if(window) {
        window.addEventListener('resize', doResizeEventListener);
    }
});
onUnmounted(()=>{
    //只移除自己的
    window.removeEventListener('resize', doResizeEventListener);
});
</script>
<template>
    <div class="banner-box-dl" ref="bannerBoxRef" @mouseenter="doStopPlay" @mouseleave="doStartAutoPlay">
        <div class="banner-body-list-dl" :style="'width: '+ bannerBodyWidth + 'px;margin-left: ' + bannerBodyMarginLeft + 'px;'">
            <div class="banner-item-dl" :style="'width: ' + baseWidth + 'px'" v-for="a in props.arr" :key="a">
                <img class="banner-img-dl" :src="a" alt="no image">
            </div>
        </div>
        <div class="control-point-list-dl" >
            <div class="point-dl" :class="(currentIndex == i ? 'point-active-dl':'')" v-for="(a,i) in props.arr" :key="a" @click="doChangeBannerByIndex(i)" ></div>
        </div>
        <IconCaretLeft class="control-left-dl icon-dl" @click="doChangeBanner(-1)" />
        <IconCaretRight class="control-right-dl icon-dl" @click="doChangeBanner(1)" />
    </div>
</template>
<style scoped>
.banner-box-dl {
    position: relative;
    overflow: hidden;
}
.banner-body-list-dl {
    height: 100%;
    transition: all 1s ease-in-out;
    transition-duration: v-bind(duration);
}
.banner-item-dl {
    width: 100%;
    height: 100%;
    display: inline-block;
}
.banner-img-dl {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-size: 0.4em;
    display: block;
}

.control-point-list-dl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    display: flex;
    justify-content: center;
}
.control-point-list-dl .point-dl {
    width: 0.4em;
    height: 0.4em;
    display: inline-block;
    border: 1px solid #fff;
    background-color: #fff6;
    border-radius: 50%;
    margin: 0.1em 0.12em;
    cursor: pointer;
}
.control-point-list-dl .point-active-dl {
    background-color: #333a;
}

.control-left-dl {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
.control-right-dl {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}
.banner-box-dl .icon-dl {
    width: 1em;
    height: 1em;
    color: #fff;
    cursor: pointer;
}
</style>